<template>
	<div id="inb">
		<hr style="height:1px;border:none;border-top:1px solid #555555;" />
		<el-row>
			<div id="top">
				<div id="inbtop-left1">
					<el-button type="info" icon="el-icon-receiving" size="small">打印</el-button>
				</div>
				<div id="inbtop-left1">
					<el-button type="info" icon="el-icon-plus" size="small" @click="addinbound">入库</el-button>
				</div>
				<div id="inbtop-left1">
					<el-button type="info" icon="el-icon-edit" size="small" @click="dialogFormVisible = true">修改</el-button>
				</div>
				<div id="inbtop-left1">
					<el-button type="info" icon="el-icon-delete" size="small" @click="dialogFormVisible = true">删除</el-button>
				</div>
				<div id="inbtop-left1">
					<el-button type="info" icon="el-icon-refresh" size="small" @click="winReload">刷新</el-button>
				</div>
			</div>
		</el-row>
		<el-row>
			<div id="trhead-left1">
				查询方案
				<el-select v-model="value1" placeholder="请选择">
					<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div id="trhead-left1">
				入库类别
				<el-select v-model="picktype" placeholder="请选择" @change="getType">
					<el-option v-for="item in intype" :key="item.intId" :label="item.intName" :value="item.intName">
					</el-option>
				</el-select>
			</div>
			<div id="trhead-left2">
				产品查询:
			</div>
			<div id="trhead-left1">
				<el-input placeholder="请输入内容" v-model="search" prefix-icon="el-icon-search" clearable>
				</el-input>
			</div>
		</el-row>
		<el-row>
			<div align="center">
				<el-table :data="tableinbound.filter(data => !search ||data.proId.toLowerCase().includes(search.toLowerCase()))"
				 style="width: 98%" height="600" :default-sort="{prop: 'inb_id', order: 'descending'}" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
					<el-table-column fixed prop="inbStatic" label="状态" sortable width="100">
					</el-table-column>
					<el-table-column fixed prop="inbId" label="编号" sortable width="100">
					</el-table-column>
					<el-table-column fixed prop="proId" label="产品名称" sortable width="120">
					</el-table-column>
					<el-table-column fixed prop="orderId" label="采购单号" sortable width="140">
					</el-table-column>
					<el-table-column prop="warName" label="入库仓库" sortable width="140">
					</el-table-column>
					<el-table-column prop="intName" label="入库类别" sortable width="140">
					</el-table-column>
					<el-table-column prop="inbDate" label="入库时间" sortable width="140">
					</el-table-column>
					<el-table-column prop="inbNum" label="数量" sortable width="100">
					</el-table-column>
					<el-table-column prop="inbUnit" label="单位" :formatter="formatter1" width="100">
					</el-table-column>
					<el-table-column prop="inbSupplier" label="供应商" :formatter="formatter2" width="140">
					</el-table-column>
					<el-table-column prop="inbNote" label="备注" :formatter="formatter3" width="200">
					</el-table-column>
					<el-table-column align="right" width="240">
						<template slot-scope="scope">
							<el-button size="mini" @click="staticEdit(scope.$index, scope.row)">审核</el-button>
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog title="产品入库" :visible.sync="dialogFormVisible">
				<el-form :model="form" label-width="100px">
					<el-form-item label="产品名称">
							<el-select v-model="form.proId" clearable placeholder="请选择">
								<el-option v-for="item in product" :key="item.proId" :label="item.proName" :value="item.proName">
								</el-option>
							</el-select>
					</el-form-item>
					<el-form-item label="采购单号">
						<el-input v-model="form.orderId" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="入库仓库">
						<el-select v-model="form.warName" placeholder="请选择">
							<el-option v-for="item in warehouse" :key="item.warId" :label="item.warName" :value="item.warName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="入库类别">
						<el-select v-model="form.intName" placeholder="请选择">
							<el-option v-for="item in intype" :key="item.intId" :label="item.intName" :value="item.intName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="数量">
						<el-input-number v-model="form.inbNum" @change="handleChange" :min="1" :max="2000" label="描述文字"></el-input-number>
					</el-form-item>
					<el-form-item label="单位">
						<el-input v-model="form.inbUnit" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="供应商">
						<el-input v-model="form.inbSupplier" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" :rows="3" v-model="form.inbNote" autocomplete="off" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer" style="height: 50px;">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button v-show="!isedit" type="primary" @click="sureAddProduct" :disabled="disable3">确 定</el-button>
				</div>
			</el-dialog>

			<el-dialog title="修改入库" :visible.sync="dialogFormVisible1">
				<el-form :model="form" label-width="100px">
					<el-form-item label="产品名称">
							<el-input v-model="form.proId" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="采购单号">
						<el-input v-model="form.orderId" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="入库仓库">
						<el-select v-model="form.warName" placeholder="请选择">
							<el-option v-for="item in warehouse" :key="item.warId" :label="item.warName" :value="item.warName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="入库类别">
						<el-select v-model="form.intName" placeholder="请选择">
							<el-option v-for="item in intype" :key="item.intId" :label="item.intName" :value="item.intName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="数量">
						<el-input-number v-model="form.inbNum" @change="handleChange" :min="1" :max="2000" label="描述文字"></el-input-number>
					</el-form-item>
					<el-form-item label="单位">
						<el-input v-model="form.inbUnit" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="供应商">
						<el-input v-model="form.inbSupplier" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" :rows="3" v-model="form.inbNote" autocomplete="off" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer" style="height: 50px;">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button v-show="!isedit" type="primary" @click="sureAddProduct" :disabled="disable3">确 定</el-button>
					<el-button v-show="isedit" type="primary" @click="sureUpdate">修 改</el-button>
				</div>
			</el-dialog>
		</el-row>
		<el-row>
			<div align="center" style="margin-top: 20px;">
				<el-pagination background layout="prev, pager, next" :total="200"></el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				inbNum: 1,	
				disable3: false,
				options1: [{	
					value: '选项1',
					label: '默认查询'
				}, {
					value: '选项2',
					label: '本年查询'
				}, {
					value: '选项3',
					label: '本月查询'
				}, {
					value: '选项4',
					label: '本周查询'
				}, {
					value: '选项5',
					label: '本日查询'
				}],
				warehouse: [],
				product: [],
				prod:[],
				intype: [],
				value1: '默认查询',
				value: '',
				picktype: '默认全部',
				search: '',
				tableinbound: [],
				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogFormVisible1: false,
				form: {
					inbId: '',
					proId: '',
					orderId: '',
					warName: '',
					intName: '',
					inbNum: '',
					inbUnit: '',
					inbSupplier: '',
					inbNote: ''
				},
				//选择种类
				types1: [],
				types2: [],
				isedit: false,
				myindex: -1
			}
		},
		mounted() {
			var _this = this;
			this.$axios.post("findinbound").then(res => {
				if (res.data) {
					_this.tableinbound = res.data.inbound;
					_this.intype = res.data.intype;
					_this.warehouse = res.data.warehouse;
					_this.product = res.data.product;
				} else {
					alert("出错了！！");
				}

			}).catch(ex => {
				alert("出错了8888");
			})
		},
		methods: {
			formatter1(row, column) {
				return row.inbUnit;
			},
			formatter2(row, column) {
				return row.inbSupplier;
			},
			formatter3(row, column) {
				return row.inbNote;
			},
			//修改
			handleEdit(index, row) {
				this.isedit = true;
				this.dialogFormVisible1 = true;
				this.form = {
					inbId: row.inbId,
					proId: row.proId,
					orderId: row.orderId,
					warName: row.warName,
					intName: row.intName,
					inbNum: row.inbNum,
					inbUnit: row.inbUnit,
					inbSupplier: row.inbSupplier,
					inbNote: row.inbNote
				};
				this.myindex = index;
			},
			sureUpdate: function() {
				this.$axios.post("updateinbound", this.form).then(v => {
					console.log(v)
					if (v.data) {
						alert("修改成功！！")
					} else {
						alert("出错了！！");
					}
				}).catch(ex => {
					alert("出错了！" + ex);
				})
				//根据form.id确认要修改的webs的id值
				this.tableinbound.splice(this.myindex, 1, this.form);
				//确认修改
				this.dialogFormVisible1 = false;
				this.isedit = false; //修改状态结束
			},
			//删除
			handleDelete(index, row) {
				var _this = this;
				this.$confirm(
					"你确定要删除该数据吗？",
					"温馨提示", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).then(() => {
					_this.$message({
						type: "success",
						message: "删除成功"
					});

					this.$axios.post("delinbound?inbId=" + row.inbId + "").then(v => {
						console.log(v)
						if (v.data) {
							alert("删除成功！！");
						} else {
							alert("出错了！！");
						}
					}).catch(ex => {
						alert("出错了！" + ex);
					})
					//index是索引，id是数据key值
					_this.tableinbound.splice(index, 1);
				}).catch(() => {
					_this.$message({
						type: "info",
						message: "你已经取消"
					});
				})

			},
			//审核
			staticEdit(index, row) {
				var _this = this;
				this.$confirm(
					"确认通过[" + row.inbId + "]单据审核吗?",
					"审核提示", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).then(() => {
					_this.$message({
						type: "success",
						message: "审核通过"
					});

					this.$axios.post("pass?inbId=" + row.inbId + "").then(v => {
						console.log(v)
						if (v.data) {
							alert("审核通过");
						} else {
							alert("出错了！！");
						}
					}).catch(ex => {
						alert("出错了！" + ex);
					})
					//根据form.id确认要修改的webs的id值
					this.tableinbound.splice(this.myindex, 1, this.row);
				}).catch(() => {
					_this.$message({
						type: "info",
						message: "你已经取消"
					});
				})

			},
			addinbound() {
				//新增
				this.form = {
					inbId: '',
					proId: '',
					orderId: '',
					warName: '',
					intName: '',
					inbNum: '',
					inbUnit: '',
					inbSupplier: '',
					inbNote: ''
				}
				this.dialogFormVisible = true;
			},
			sureAddProduct() {
				//确认添加
				this.$axios.post("addinbound", this.form).then(v => {
					console.log(v)
					if (v.data) {
						this.key2 = v.data.ans;
						if (this.key2 == 'y') {
							alert("入库成功！！");
							this.$router.push("/inbound");
						} else {
							alert("入库失败,产品不存在!!");
						}
					} else {
						alert("出错了！！");
					}
				}).catch(ex => {
					alert("出错了！" + ex);
				})
				this.dialogFormVisible = false;
				this.tableinbound.push(this.form);
			},	
			//触发事件
			getType: function() {
				alert('您选择了' + this.picktype);
				var _this = this;
				this.$axios.post("findinbound?intName=" + this.picktype + "").then(res => {
					if (res.data) {
						_this.tableinbound = res.data.inbound;
						_this.intype = res.data.intype;
						_this.warehouse = res.data.warehouse;
						_this.product = res.data.product;
					} else {
						alert("出错了！！");
					}
				
				}).catch(ex => {
					alert("出错了8888");
				})
			},
			//刷新页面s
			winReload: function(cond) {
				this.$router.go(0);
			},

		}
	}
</script>

<style>
	#inb {
		margin: 5px 15px 5px 15px;
	}

	#top {
		width: 100%;
		height: 50px;
		border: 1px solid #FF0000;
	}

	#trhead-left1 {
		margin: 10px 15px 8px 5px;
		float: left;
	}

	#trhead-left2 {
		margin-top: 18px;
		float: left;
	}

	#inbtop-left1 {
		width: 50px;
		margin-top: 7px;
		margin-left: 40px;
		float: left;
	}
</style>
